Skip to main content
warning

This guide has been written using AI. This warning will be removed once its contents have been checked over by a human.

Using the Workflow Editor in LiveCode Create

The Workflow Editor in LiveCode Create allows you to visually define app logic using Actions. By dragging and connecting Action Blocks, you can create workflows that respond to user interactions, trigger specific behaviors, and even mix no-code workflows with custom script.

This guide provides an in-depth look at how to use the Workflow Editor effectively, including its features, controls, and advanced options.

What is the Workflow Editor?​

The Workflow Editor is a drag-and-drop interface that allows you to build app logic without writing code. It provides:

  • Visual Actions: Ready-made Action Blocks you can drag into place.
  • Clear Workflow Logic: Connect blocks to create step-by-step workflows.
  • Script View: View and customize the LiveCode script generated by your actions.
  • Flexibility: Mix pre-built Actions with custom script for unlimited control.

Workflow Editor Overview

Accessing the Workflow Editor​

To open the Workflow Editor:

  1. Select a Widget: Click on a widget in the Canvas Area or Project Browser.
  2. Open the Property Inspector and go to the Actions Tab.
  3. Click Edit Workflow.

Alternatively:

  • Right-click the widget and select Edit Actions.

The Workflow Editor will open, showing a blank canvas ready for you to create workflows.

Components of the Workflow Editor​

1. Workflow Canvas​

The Workflow Canvas is your workspace where you drag and connect Action Blocks.

  • Start Point: Every workflow begins with a Trigger.
  • Action Blocks: Represent tasks that your workflow performs.
  • Connectors: Define the flow by connecting blocks.

2. Action Library​

On the right-hand side of the Workflow Editor, you’ll find the Action Library. This is where you drag Action Blocks from.

Common actions include:

  • Navigate to Layout
  • Show/Hide Widget
  • Create/Update Records
  • Send Notifications

Action Library Example

3. Controls and Script View​

At the top of the Workflow Editor, you’ll find key controls:

  • Expand/Minimize Blocks: Click the arrows on Action Blocks to expand or minimize them.
  • Toggle Script View: Switch between the visual workflow and the generated script.
  • Unlock Action Blocks: In Script View, click the Padlock Icon to convert a ready-made action into a Raw LiveCode Script Block.

Creating a Workflow​

Follow these steps to build a workflow in the Workflow Editor:

Step 1: Choose a Trigger​

A workflow starts with a Trigger—an event that causes the workflow to run.

Examples of triggers include:

  • onMouseUp: When a button is clicked.
  • onTextChanged: When a text field value is updated.

The trigger is automatically defined when you open the Workflow Editor for an object.

Step 2: Drag Action Blocks onto the Canvas​

  1. Open the Action Library: Actions are available on the right-hand side.
  2. Drag and Drop: Click and drag an Action Block onto the canvas.
  3. Connect Actions: Use connectors to define the flow between Action Blocks.

Example: A simple workflow to navigate to another layout and show a confirmation message:

  • Action 1: Navigate to Layout.
  • Action 2: Show Alert.
Generated Script Example
go to layout "Dashboard"  
answer "You have successfully navigated!"

Step 3: Reorder Actions​

You can reorder Action Blocks by dragging them up or down in the Workflow Canvas.

  • Hover over an Action Block to reveal the drag handle.
  • Click, drag, and drop the block to a new position in the sequence.

This ensures tasks are performed in the correct order.

Step 4: Expand or Minimize Blocks​

Action Blocks can be expanded to show their details or minimized for clarity.

  • Expand: Click the arrow icon on the Action Block to show its parameters.
  • Minimize: Click the arrow again to collapse the block.

Tip: Minimize completed blocks to keep your Workflow Canvas clean and easy to read.

Step 5: Use If/Else Logic​

The Workflow Editor supports conditional logic through If/Else Actions.

  1. Drag the If Action Block from the Action Library onto the canvas.
  2. Set the condition (e.g., if a field is empty).
  3. Connect Actions to the If/Else branches.

Example: Show an alert if a text field is empty.

If/Else Example
if field "username" is empty then  
 answer "Username cannot be blank!"  
else  
 answer "Welcome!"  
end if

Step 6: Toggle Script View​

LiveCode Create automatically generates LiveCode Script for your Actions.

  • Toggle Script View: Click the Script View button to switch from visual blocks to the script.
  • View Script: See the script behind all connected actions.

Step 7: Unlock Actions to Customize​

In Script View, you can customize individual Action Blocks by unlocking them:

  1. Click the Padlock Icon next to an Action Block.
  2. The block is converted into a Raw LiveCode Script Block.
  3. Modify the script directly for advanced customization.

Example: Unlock a "Show Alert" Action to customize its behavior:

Unlocked Script Block
answer "Custom message for the user!"

Testing Your Workflow​

  1. Save the Workflow: Click Save to ensure your changes are preserved.
  2. Switch to Run Mode: Toggle to Run Mode in the IDE.
  3. Test Triggers and Actions: Interact with the app to verify the workflow.

Advanced Workflow Tips​

  • Use Comments: Add Comment Blocks to explain parts of your workflow for clarity.
  • Combine Visual Actions and Script: Use Raw LiveCode Script Blocks for tasks that require custom logic.
  • Debug Workflows: Test workflows frequently in Run Mode to catch errors early.
  • Organize Complex Workflows: Minimize completed blocks and use clear naming for workflows.

Example Workflow: Adding a Record and Showing a Confirmation​

Let’s create a workflow where clicking a button:

  1. Adds a new record to a collection.
  2. Shows a confirmation message.

Steps:​

  1. Select the Button Widget.
  2. Open the Actions Tab → Edit Workflow.
  3. Drag the following Actions from the Action Library:
    • Create Record: Add a new record to a collection.
    • Show Alert: Display a confirmation message.
Add Record Workflow
create record in collection "Tasks" with  
 "taskName" = field "TaskInput",  
 "status" = "Pending"  

answer "Task successfully added!"

Best Practices for Using the Workflow Editor​

  1. Keep Workflows Simple: Break complex workflows into smaller, manageable steps.
  2. Test Often: Test workflows as you build them to ensure they work as expected.
  3. Expand and Review: Expand blocks to verify parameters before minimizing.
  4. Unlock Blocks Wisely: Only unlock actions when you need to customize behavior.
  5. Mix Actions and Script: Use Raw LiveCode Script Blocks for advanced tasks while relying on Actions for common logic.

Conclusion​

The Workflow Editor in LiveCode Create provides a powerful, visual way to add app logic using Actions. By dragging and connecting pre-built Action Blocks, you can create workflows that handle everything from navigation to record creation—without writing code.

For more advanced needs, you can unlock actions and customize the script, giving you full flexibility with LiveCode’s powerful scripting language.

For further learning:

Thank you for your feedback!

Was this page helpful?